<template>
  <!-- 商品列表 -->
  <div class="card-wrap">
    <div class="card-title-wrap">
      <h1 class="card-title">工程师推荐</h1>
    </div>
    <!-- 循环渲染过滤好的数据 -->
    <div v-for="(item, index) in evenGoodsList" :key="item+index">
      <van-card
        :title="item.title"
        :price="item.price"
        :num="'销量：' + item.num"
        :tag="item.tag"
        :lazy-load="true"
        title-class="sales-title"
        desc-class="sales-desc"
        num-class="sales-num"
        price-class="sales-price"
        custom-class="sales-wrap"
        @click="toPage(item.link)"
      >
        <!-- 自定义左侧图片 -->
        <view slot="thumb">
          <img :src="item.thumb"
              class="sales-thumb"
            />
        </view>
        <!-- 购买图标 -->
        <view slot="footer">
          <!-- 绑定事件，阻止冒泡 -->
          <!-- <div class="sales-shopping-box" @click.stop="toGoodsBuy(item.link)">
            <img src="/static/images/icon_shopping.png"
              class="sales-shopping"
            />
          </div> -->
          <button class='sales-shopping-box2'
            @click.stop="toGoodsBuy(item.link)"
          >
            立即购买
          </button>
        </view>
      </van-card>

    </div>
  </div>
</template>

<script>
import { bindViewTap } from '@/utils/index' // 引入公用库

export default {
  props: ['goodsList', 'navto'], // 接收外部传入的数据
  data () {
    return {
      lazy: true
    }
  },
  computed: {
    // 过滤一下数据，tag有值就变成指定标签字体
    evenGoodsList: function () {
      return this.goodsList.filter(function (data) {
        if (data.tag) {
          data.tag = '热门'
        }
        return data
      })
    }
  },
  methods: {
    // TODO: 商品购买跳转
    toGoodsBuy (id) {
      console.log(id)
      let navFlag = this.navto || false // 默认不使用navto方式跳转页面
      bindViewTap(`../productPage/main?id=${id}`, navFlag)
    },
    // TODO: 跳到商品详情页面
    toPage (id) {
      console.log('商品页', id)
      let navFlag = this.navto || false // 默认不使用navto方式跳转页面
      bindViewTap(`../productPage/main?id=${id}`, navFlag)
    }
  }
}
</script>

<style>
.card-wrap {
  display: block;
  margin: 0 14rpx;
}
/* 列表标题 */
.card-title-wrap {

}
.card-title {
  /* margin-bottom: 10px; */
  height: 50rpx;
  line-height: 50rpx;
  font-size: 30rpx;
  font-weight: bold;
  padding: 10rpx 0 10rpx 20rpx;
  /* background: #fff; */
  border-bottom: 1px solid rgba(190,190,190,.7);
}
/* 每个商品间隔调整 */
.sales-wrap {
  padding-left: 5px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(190,190,190,.7);
  background: #000 !important;
  color: #fff !important;
}
.sales-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-top: 10rpx;
  font-size: 28rpx;
}
/* 商品详细描述 */
.sales-desc{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /*显示几行*/
  -webkit-box-orient: vertical;
  word-break: break-all;
}
/* 商品价格 */
.sales-price {
  position: absolute;
  font-size: 36rpx;
  bottom: 72rpx;
  color: #E2C573 !important;
  /* color: #C5223D !important; */
}
/* 销量样式 */
.sales-num {
  position: absolute;
  float: none !important;
  font-size: 28rpx;
  bottom: 16rpx;
}
/* 第一版本购买按钮 */
.sales-shopping-box {
  position: absolute;
  width: 56rpx;
  height: 56rpx;
  right: 56rpx;
  bottom: 22rpx;
}
.sales-shopping {
  width: 48rpx;
  height: 48rpx;
}
.sales-shopping img{
  width: 100%;
  height: 100%;
}
/* 第二版本立即购买按钮 */
.sales-shopping-box2{
  position: absolute;
  /* width: 126rpx; */
  height: 56rpx;
  right:30rpx;
  bottom:30rpx;
  font-size: 22rpx;
  border-radius: 26rpx;
  font-weight: bold;
  background: #E2C573;
  color: #000;
  /* 背景颜色渐变（可放多个渐变） 参数1方向（可写角度50deg）2颜色（占的比例-可选） 3颜色..可多个颜色 */
  /* background-image: linear-gradient(145deg, rgb(238, 59, 59) 55%, #FF9823); */
  /* color: #FFF4D4; */
}
/* 左侧图片调整空间大小 */
.van-card__thumb {
  width: 160px !important;
  height: 120px !important;
}
.sales-thumb {
  overflow: hidden;
  width: 160px;
  height: 120px;
  border-radius: 6rpx;
  /* 给元素增加阴影  参数解析：1x水平阴影 2y垂直阴影 3模糊距离 4阴影尺寸 5阴影颜色 inset（内部阴影）逗号隔开可写多组叠加 */
  /* box-shadow: 1px 0 3px #969696; */
}
</style>
